<template>
	<view>
		<van-nav-bar
		  left-text="返回首页"
		  left-arrow
		  :border="false"
		 @click-left="backHome"
		 
		/>
		<view>
			<van-toast id="van-toast" />
			<view class="container br">
				<!-- form表单 -->
				<view class="form_wrap">
					<view class="form br">
						
						<view class="img mb35">
							<image src="../../static/logo.png" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
						</view>
						
						<view class="tit_wrap br">
							<view class="tit fs38">
								欢迎使用坚果云
							</view>
							
						</view>
						<view class="form_items_wrap br">
							
							
							
							<van-cell-group v-if="loginWay"  :border="false">
								<van-field type="text" :border="false" :value="phone"  :error-message="errorMessage" placeholder="请输入手机号码" class="fs"
									@input="inputPhone">
								</van-field>
								
								
								
								<van-field type="text" :value="captcha" :error-message="errorMessage" @input="inputCode" placeholder="请输入手机验证码"
									class="fs" use-button-slot>
									<van-button slot="button" size="small" class="getcode" @click="getCode">
										<text
											:class="{btncode:getCodeIf}">{{computeTime > 0 ? `已发送${computeTime}s`:'获取验证码'}}</text>
									</van-button>
								</van-field>
							</van-cell-group>

							<van-cell-group v-else  :border="false">
								<van-field type="text" :value="username" @input="inputUserName" placeholder="请输入您的账号"
									class="fs" />
									
								<van-field :value="pwd" @input="inputPwd" :type="type" placeholder="请输入您的密码"
									class="fs">
										
											<van-icon name="eye" slot="right-icon" @click="showPwd" />
										
									</van-field>
									
									

							</van-cell-group>
							
							<view class="toggleAndIndex">
								<!-- <navigator url="/pages/index/index" hover-class="navigator-hover" open-type="switchTab">
									返回首页
								</navigator> -->
								
								<view @click="forgetPwd">忘记密码</view>
								
								<view class="toggle"  @click="loginWay = !loginWay">
									{{loginWay ? '切换密码登录':'切换手机号登录'}}
								</view>
							</view>
							
							<view class="btn">


								<van-button type="primary" size="large" @click="goLogin">立即登录</van-button>
								
								


							</view>
							
							<navigator url="../reg/reg" style="font-size: 26rpx;color: red;text-align: center;margin-top: 30rpx;">没有账号,请先注册</navigator>
							
							

						</view>
					</view>
				</view>

			</view>
			<!-- <Footer></Footer> -->
		</view>

	</view>
</template>

<script>
	import Toast from "../../wxcomponents/vant/toast/toast.js"
	// import Footer from "../../components/footer.vue"
	import {
		mapMutations
	} from "vuex"
	import {
		mobileLogin,
		sendSms,
		pwdLogin
	} from "../../api/api.js"
	export default {
		data() {
			return {
				loginWay: true, // true代表的是短信登录,false代表的是密码登录
				computeTime: 0,
				// 是否获取验证码
				getCodeIf: false,
				phone: '',
				captcha: '',
				pwd: '123456',
				username: 'admin',
				type:'password',
				errorMessage:''
			}
		},
		computed: {
			// 校验手机号的正确性
			rightPhone() {
				return /^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)
			}
		},
		components: {
			// Footer
		},
		methods: {
			// 获取验证码
			async getCode() {
				this.getCodeIf = true
				if (!this.computeTime) {
					this.computeTime = 60
					this.intervalId = setInterval(() => {
						this.computeTime--
						if (this.computeTime <= 0) {
							clearInterval(this.intervalId)
							this.getCodeIf = false
						}
					}, 1000)
					// 发送短信验证码
					// const res = await this.request({
					// 	url:this.baseURL+'/api/sms/send',
					// 	method:'GET',
					// 	data:{
					// 		mobile:this.phone
					// 	}
					// })
					// console.log(res)

					// 发送短信验证码的event事件要与方法名一致
					const res = await sendSms(this.phone, 'mobilelogin')
				}

			},
			// 返回
			backHome(){
				
				uni.switchTab({
					url: '../home/home',
					
				});
			},
			showPwd(){
				if(this.type === 'password'){
					this.type = 'text'
					
				}else{
					this.type = 'password'
				}
				
			},
			inputPhone(e) {

				// console.log('手机号',e)
				this.phone = e.detail
			},
			inputPwd(e) {
				// console.log('mima',e)
				this.pwd = e.detail
			},
			inputUserName(e) {

				this.username = e.detail
			},
			inputCode(e) {
				// console.log('短信验证码',e)
				this.captcha = e.detail
			},
			
			
			forgetPwd(){
				uni.navigateTo({
					url:'../forgetPwd/forgetPwd'
				})
			},
			
			// 登录
			async goLogin() {
				// console.log(123)
				// 手机登录
				let res
				if (this.loginWay) { // 手机登录
					const {
						phone,
						captcha,
						rightPhone
					} = this
					if (!phone) {
						return Toast.fail('手机号不能为空')
					} else if (!captcha) {
						return Toast.fail('验证码不能为空')
					} else if (!rightPhone) {
						return Toast.fail('手机号输入不正确')
					}
					res = await mobileLogin({
						mobile: phone,
						captcha: captcha
					})
					
					
					

					if (res.code === 0) {
						return Toast.fail(res.msg)
					}
				} else { // 密码登录
					const {
						username,
						pwd
					} = this

					// const username = this.username
					if (!username) {
						return Toast.fail('账户不能为空')
					} else if (!pwd) {
						return Toast.fail('密码不能为空')
					}
					res = await pwdLogin({
						account: username,
						password: pwd
					})

				}

				// if (res.code === 1) {
				// 	const {userinfo} = res.data
				// 	// console.log(userinfo);return
				// 	uni.setStorage({
				// 		key: 'userInfo',
				// 		data: userinfo,
				// 		success: function() {
				// 			console.log('success');
				// 		}
				// 	})
				// }

				if (res.code === 1) {
					const {
						userinfo
					} = res.data
					console.log('??', userinfo)
					this.$store.commit('login', userinfo)
					uni.switchTab({
						url: '../my/my'
					})
				}


				console.log('res', res)


			}




		}
	}
</script>

<style lang="scss" scoped>
	.van-button {
		border: none !important;

	}
	
	/deep/ .van-nav-bar__text{
		color: #4a4a4a !important;
	}
	
	/deep/ .van-icon{
		color: #4a4a4a !important;
		margin-right: 22rpx !important;
	}
	
	/deep/ .van-cell{
		// padding-left: 0;
		border-bottom: 1px solid #e5e5ea;
		padding-left: 0;
		padding-right: 0;
		border-top:none ;
	}

	// /deep/ .van-button {
	// 	margin-bottom: 20rpx !important;
	// }
	.toggleAndIndex{
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #78a355;
		margin-top: 30rpx;
	}

	// 获取到验证码按钮颜色改变
	.btncode {
		color: red;
	}

	.fs {
		font-size: 18rpx;
	}

	// .br{
	// 	border: 1px solid red;
	// }
	.container {
		padding: 41rpx 27rpx 120rpx;
		// background-image: url("");
		background-repeat: repeat;

		.form_wrap {
			// background-color: #f4fee3;
			opacity: 0.9;

			.form {
				// width: 457rpx;
				// height: 760rpx;
				border-radius: 8rpx;
				padding: 25rpx;

				.tit_wrap {
					width: 409rpx;
					// height: 115rpx;

					.tit {
						font-size: 22rpx;
						color: #333333;
					}

					.tip {
						color: #d81b43;
						font-size: 20rpx;
						line-height: 36rpx;
					}
				}

				.form_items_wrap {
					margin-top: 32rpx;

					.btn {
						margin-top: 48rpx;
						border-radius: 3rpx;
					}
				}
			}
		}

	}
</style>
